<template>
	<view class="complaints-box">
		<view class="type-box">
			<picker mode="selector" :range="list" range-key="name" @change="changeList">
				<view>请选择投诉问题的类型：{{index==-1?'': list[index].name}}</view>
			</picker>
		</view>
		<view class="label-name">如有其他们问题，请输入您的问题后提交</view>
		<view class="textarea-box">
			<textarea v-model="desc" placeholder="请填写10个字以上的描述以便我们及时处理您的投诉"></textarea>
		</view>
		
		<view class="btm-box px-2">
			<view class="btn-submit" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import {postComplaintsCategoryList,postComplaintsSumit} from '@/api/expert.js'
	export default {
		data() {
			return {
				list:[],
				index:-1,
				desc:''
			}
		},
		onShow() {
			this.getCategory()
		},
		methods: {
			getCategory(){
				postComplaintsCategoryList().then(res=>{
					this.list=res.data
				})
			},
			changeList(e){
				this.index=e.detail.value
			},
			submit(){
				var data={
					desc:this.desc
				}
				if(this.index!=-1) data.name=this.list[this.index].name
				postComplaintsSumit(data).then(res=>{
					if(res.code==1){
						this.desc=''
						this.index=-1
					}
					this.$u.toast(res.msg);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.complaints-box {
	padding: 15rpx;
	.type-box {
		padding: 24rpx 15rpx;
		border-bottom: solid 1rpx #E0E0E0;
		picker {
			width: 100%;
			font-size: 28rpx;
			color: #616161;
			font-weight: 500;
		}
	}
	.label-name {
		padding: 24rpx 15rpx;
		border-bottom: solid 1rpx #E0E0E0;
		font-size: 28rpx;
		color: #616161;
		font-weight: 500;
		margin-bottom: 20rpx;
	}
	.textarea-box {
		width: 100%;
		height: 350rpx;
		background-color: white;
		padding: 37rpx 14rpx;
		box-sizing: border-box;
		textarea {
			width: 100%;
			height: 100%;
			font-size: 24rpx;
			color: #616161;
			font-weight: 500;
		}
	}
	.btm-box {
		margin-top: 175rpx;
		.btn-submit {
			width: 100%;
			height: 98rpx;
			background: #C11559;
			border-radius: 49rpx;
			color: white;
			font-size: 40rpx;
			line-height: 98rpx;
			text-align: center;
			font-weight: 500;
		}
	}
}
</style>
